<template>
  <page-body class="openlayer">
    <side-bar>
      <menu-1 :title="'地图高亮'">
        <div
          v-for="(item, index) in provinces"
          :key="index"
          style="display: inline-block"
        >
          <ol-button
            v-if="item.properties.name != ''"
            @cc="hightlightByAdcode($event, item.properties.adcode)"
            :title="item.properties.name"
          />
        </div>
      </menu-1>
      <menu-1 :title="'图层切换'">
        <ol-button
          v-for="(item, index) in layers"
          :key="index"
          :title="item.name"
          @cc="toggleLayer(item.id, $event)"
        />
      </menu-1>
      <menu-1 :title="'视图定位'">
        <ol-button-2
          v-for="(item, index) in posList"
          :key="index"
          :title="item.name"
          @click="go(item.cooridnate, 7)"
        />
      </menu-1>
    </side-bar>

    <page-main class="main">
      <ol-base />
      <feature-hover />
      <feature-click />
    </page-main>
  </page-body>
</template>
<script lang="ts">
import { defineComponent, onMounted } from "vue";

import Menu1 from "@/components/Menu1.vue";
import OlButton from "@/components/ol/OlButton.vue";
import OlButton2 from "@/components/ol/OlButton2.vue";
import Map from "ol/Map";

import store from "@/store/index";
import SideBar from "../components/SideBar.vue";
import PageMain from "@/components/PageMain.vue";
import PageBody from "@/components/PageBody.vue";

import OlBase from "@/components/ol/OlBase.vue";
import FeatureHover from "@/components/ol/FeatureHover.vue";
import FeatureClick from "@/components/ol/FeatureClick.vue";
import controllerHightlight from "@/components/ol/ControllerHighlight";
import controllerLayer from "@/components/ol/ControllerLayer";
import setPositionTo from "@/components/ol/SetPositionTo";
import colorZone from "@/components/ol/colorZone";

export default defineComponent({
  components: {
    Menu1,
    OlBase,
    OlButton,
    OlButton2,

    SideBar,
    PageMain,
    PageBody,
    FeatureClick,
    // eslint-disable-next-line vue/no-unused-components
    FeatureHover,
  },
  setup() {
    let map: null | Map = null;
    onMounted(() => {
      map = store.state.map;
    });
    return {
      ...controllerHightlight(),
      ...controllerLayer(),
      ...setPositionTo(),
      ...colorZone(),
    };
  },
});
</script>
<style lang="scss" scoped>
::v-deep(.main) {
  padding: 0;
  .con {
    padding: 0;
  }
}
</style>
